<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS时钟</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #4444;
    }

    /*  表盘*/
    .watch-dial {
        width: 300px;
        height: 300px;
        border-radius: 50%;
        border: 10px solid #93D9E8;
        background-color: white;
        position: relative;
        box-shadow: inset 0 0 2px 5px #98C3C9;
    }

    /*  刻度*/
    .watch-dial ul {
        list-style: none;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .watch-dial ul li {
        width: 2px;
        height: 5px;
        background-color: black;
        position: absolute;
        left: calc(50% - 1px);
        transform-origin: center 150px;
    }


    .watch-dial ul li:after {
        content: attr(data-hours);
        position: absolute;
        top: 5px;
        font-size: 25px;
        font-weight: bold;
        text-indent: -10px;

    }

    .circle, .hour, .minute, .second {
        position: absolute;
        background: black;
        transform-origin: left bottom;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
    }

    .circle {
        width: 25px;
        height: 25px;
        top: calc(50% - (25px / 2));
        left: calc(50% - (25px / 2));
    }

    .hour {
        width: 10px;
        height: 50px;
        left: calc(50% - 5px);
        top: calc(50% - 50px);
    }

    .minute {
        width: 7px;
        height: 70px;
        left: calc(50% - 3.5px);
        top: calc(50% - 70px);
    }

    .second {
        width: 2px;
        height: 100px;
        left: calc(50% - 1px);
        top: calc(50% - 100px);
        border-radius: 30%;
    }
</style>
<body>
<div class="watch-dial">
  <ul></ul>
  <!--圆点-->
  <div class="circle"></div>
  <!--时针-->
  <div class="hour"></div>
  <!--分针-->
  <div class="minute"></div>
  <!--秒针-->
  <div class="second"></div>
</div>
</body>
<script type="application/javascript">
  let ul = document.querySelector('.watch-dial ul');
  let hourList = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
  let index = 0;
  let style = document.createElement('style');
  style.type = 'text/css';

  for (let i = 0; i < 60; i++) {
    let li = document.createElement('li');
    if (i%5 === 0) {
      li.dataset['hours'] = hourList[index];
      index++;
      // 表盘刻度数字矫正
      if (index > 9) {
        style.innerHTML += `.watch-dial ul li:nth-of-type(${i + 1}):after{
          transform:rotate(${-i*6}deg);
          margin-top: 10px;
          margin-left: -5px;
        }\n`;
      } else {
        style.innerHTML += `.watch-dial ul li:nth-of-type(${i + 1}):after{
          transform:rotate(${-i*6}deg);
        }\n`;
      }

    }
    li.style.width = (i%5 === 0) ? '5px' : '2px';
    li.style.height = (i%5 === 0) ? '8px' : '5px';
    li.style.backgroundColor = 'black';
    li.style.transform = `rotate(${i*6}deg)`;
    ul.appendChild(li);
  }
  let hourDom = document.querySelector('.watch-dial .hour');
  let minuteDom = document.querySelector('.watch-dial .minute');
  let secondDom = document.querySelector('.watch-dial .second');

  function run() {
    let now = new Date();
    let hour = now.getHours();
    let minute = now.getMinutes();
    let second = now.getSeconds();
    hourDom.style.transform = `rotate(${hour*30 + minute/2}deg)`;
    minuteDom.style.transform = `rotate(${minute*6}deg)`;
    secondDom.style.transform = `rotate(${second*6}deg)`;
    setInterval(run, 1000);
  }

  run();

  document.head.appendChild(style);
</script>
</html>